<template>
    <div class="tabs" :class="{ fixed }">
        <div
            class="tab-item"
            :class="{ active: item.value === props.active }"
            v-for="item in props.list"
            :key="item"
            @click="onTabClick(item.value)"
        >
            {{ item.label }}
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    active: {
        type: Number,
        default: "",
    },
    list: {
        type: Array,
        default: () => [],
    },
    fixed: {
        type: Boolean,
        default: false,
    },
});

const emits = defineEmits(["update:active"]);

const onTabClick = (value) => {
    emits("update:active", value);
};
</script>
<style lang="scss" scoped>
.tabs {
    width: 100%;
    height: 55px;
    display: flex;
    border-bottom: 1px solid #e6eced;
    background-color: #fff;

    &.fixed {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .tab-item {
        width: 104px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        cursor: pointer;

        &.active {
            position: relative;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                height: 4px;
                background-color: #5085fb;
                border-radius: 4px;
            }
        }
    }
}
</style>
